<template>
  <div class='container'>
              <!-- 新增目录弹窗 -->
          <el-form ref="form" :model="formAddList" label-width="80px" :rules="rules">
            <el-form-item label="所属科目" prop="subjectName" v-show="!this.$route.query.id&&!this.$route.query.name">
              <el-select  placeholder="请选择" v-model="formAddList.subjectID">
                <el-option
              v-for="item in directoryName"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目录名称" label-width="80px" prop="directoryName">
              <el-input v-model="formAddList.directoryName"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormclear">取 消</el-button>
            <el-button type="primary" @click="dialogFormAdd">确 定</el-button>
          </div>

  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { add, detail, update } from '@/api/hmmm/directorys'
export default {
  name: 'directorysEdit',
  props: {
    isEdit: {
      type: Boolean,
      required: true
    },
    listId: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 表单绑定的值
      formAddList: {
        directoryName: '',
        subjectID: this.$route.query.id
      },

      directoryName: {}, // 所属学科目录
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ],
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getSimple()
    // this.addDirectorys()
    this.getDetail()
  },
  methods: {

    // 数据回填之后修改表单
    async resetDirectorys () {
      await update(this.formAddList, this.listId)
      this.$message.success('修改目录成功')
      this.$emit('close')
    },

    // 编辑回填表单
    async getDetail () {
      // 判断是否是编辑状态
      if (this.isEdit) {
        // 获取当前点击的目录
        const res = await detail(this.listId)
        // console.log(res)
        this.formAddList = res.data
      }
    },

    // 获取所属学科
    async getSimple () {
      const res = await simple()
      // console.log(res)
      // 将获取到的科目渲染到下拉菜单上
      this.directoryName = res.data
      // console.log(this.directoryName)
    },

    // 添加学科
    async addDirectorys () {
      await add({ directoryName: this.formAddList.directoryName, subjectID: Number(this.formAddList.subjectID) })
      this.$message.success('添加目录成功')
      this.$emit('close')
    },

    // 取消弹窗
    dialogFormclear () {
      this.$emit('close')
    },

    // 确定添加目录
    dialogFormAdd () {
      // 表单兜底验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          // this.addDirectorys()
          // 判断是修改还是添加目录
          this.isEdit ? this.resetDirectorys() : this.addDirectorys()
          this.formAddList = {}
        }
      })
    }
  }
}
</script>

<style scoped>
.el-input{
    width: 222px;
}
.dialog-footer{
    position: relative;
    left: 120px;
}
</style>
